<template>
  <view class="mine-bg">
    <!-- 头部会员卡 -->
    <view class="member-card">
      <view class="member-card-header">
        <view class="member-card-title">{{ associationInfo.associationName }}</view>
        <view class="member-card-sub">{{ associationInfo.briefIntroduction }}</view>
      </view>
      <view class="member-info">
        <image class="avatar" :src="imgUrl+userInfo.avatar" />
        <view class="member-detail">
          <view class="member-name">
            {{userInfo.empName}}
            
          </view>
          <!-- <view class="member-id">会员编号：{{userInfo.vip_code || '暂无'}}</view> -->
        </view>
      </view>
      <view class="member-meta">
        <view class="meta-row">
          <view>所属单位</view>
          <view>联系方式</view>
        </view>
        <view class="meta-row meta-bold">
          <view>{{userInfo.enterpriseName || '暂无' }}<text class="member-tag" v-if="userInfo.memberLevelId!=null" >{{getEmLabel(userInfo.memberLevelId)}}</text></view>
          <view>{{userInfo.phonenumber}}</view>
        </view>
        <view class="meta-row">
          <view>会员等级</view>
          <view>公司职位</view>
        </view>
        <view class="meta-row meta-bold">
          <view class="vip">{{getVipLabel(userInfo.vipLv)}}</view>
          <view class="job"><u-icon name="checkmark-circle-fill" color="#19be6b" size="18" /> {{userInfo.isBoss==0 ?'经理（负责人）' :'员工' }}</view>
        </view>
        <view class="meta-row">
          <!-- <view>有效期至</view> -->
          <view></view>
        </view>
        <view class="meta-row meta-bold">
          <!-- <view>{{userInfo.memberValidityDate}}</view> -->
          <view class="expire" v-if="userInfo.memberValidityDate" >{{userInfo.memberValidityDate}}</view>
        </view>
      </view>
      <button class="edit-btn" @click="toEdit()" >
        <u-icon name="edit-pen" color="#fff" size="20" /> 编辑资料
      </button>
      <button class="logout-btn" @click="logout()" >
        <u-icon name="minus-circle" color="#fff" size="20" /> 退出登录
      </button>
    </view>

    <!-- 协会服务 -->
    <view class="section">
      <view class="section-title">
        <u-icon name="grid-fill" color="#409eff" size="22" style="margin-right:6px;" /> 协会服务
      </view>
      <view class="service-list">
        <view class="service-item" @click="To('/pages/mine/enterprise_detail')"   >
          <view class="service-icon" style="background:rgba(64,158,255,0.08);">
            <u-icon name="order" color="#409eff" size="28" />
          </view>
          <view class="service-text">企业详情</view>
        </view>
        <block v-for="item in services" :key="item.text" >
          <view class="service-item" v-if="userInfo.isBoss==0 " @click="To(item.path)" >
            <view class="service-icon" :style="{ background: item.bg }">
              <up-icon :name="item.icon" :color="item.color" size="28" />
            </view>
            <view class="service-text">{{ item.text }}</view>
          </view>
        </block>
        <view class="service-item" @click="To('/pages/mine/feedback_record')" v-if="userInfo.isBoss==0 " >
          <view class="service-icon" style="background:rgba(46,204,113,0.08);">
            <u-icon name="file-text-fill" color="#5a98f7" size="28" />
          </view>
          <view class="service-text">反馈记录</view>
        </view>
        <view class="service-item" @click="toFeedback" v-if="userInfo.isBoss==0 " >
          <view class="service-icon" style="background:rgba(46,204,113,0.08);">
            <u-icon name="info-circle-fill" color="#2ecc71" size="28" />
          </view>
          <view class="service-text">反馈投诉</view>
        </view>
        <view class="service-item">
          <view class="service-icon" style="background:rgba(46,204,113,0.08);">
            <u-icon name="server-man" color="#2ecc71" size="28" />
          </view>
          <view class="service-text">协会客服</view>
        </view>
        <!-- <view class="service-item">
          <view class="service-icon" style="background:#f5f6fa;">
            <u-icon name="setting-fill" color="#bcbcbc" size="28" />
          </view>
          <view class="service-text">更多设置</view>
        </view> -->
      </view>
    </view>

    <!-- 协会通知 -->
    <view class="section">
      <view class="section-title">
        <u-icon name="bell-fill" color="#409eff" size="22" style="margin-right:6px;" /> 协会通知
        <!-- <text class="section-more">全部</text> -->
      </view>
      <view class="notice-list">
        <view class="notice-item" v-for="(item, idx) in notices" :key="item.title" @click="toNotice(item)" >
          <view class="notice-dot" :class="[idx === 0 ? 'dot-red' : '' ]" ></view>
          <view class="notice-content">
            <view class="notice-title">{{ item.title }}</view>
            <view class="notice-meta">{{ item.updateTime }} · 协会</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 页脚 -->
    <view class="footer">
      <view>© 2025 {{ associationInfo.associationName }} 版权所有</view>
      <view class="footer-info">
        服务热线：<text user-select="true">{{ associationInfo.contactPhone }}</text> | 邮箱：<text user-select="true">{{ associationInfo.contactEmail }}</text>
      </view>
    </view>

    <tabbar :selected="3" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {imgUrl} from '@/config/index'
import {getNoticeList,getEmployeeInfo,getDict} from '@/api/index'
import tabbar from '@/components/tabbar.vue'
import {onShow} from '@dcloudio/uni-app'
import { onMounted } from 'vue'
onShow(() => {
  uni.hideTabBar()
  
  if(uni.getStorageSync('token')){
    getEmployeeInfo().then(res=>{
      // console.log(res);
      userInfo.value = res.data
      uni.setStorageSync('userInfo', res.data)
    })
  }else{
    uni.reLaunch({url:'/pages/mine/login'})
  }
})
let userInfo = ref({})
let emType = ref([])
let vipType = ref([])
onMounted(() => {
  getDict('em_type').then(res => {
    emType.value = res.data
  })
  getDict('vip_lv').then(res => {
    vipType.value = res.data
  })
  getNotice()
  associationInfo.value=uni.getStorageSync('associationInfo')
})
let associationInfo = ref({})
const getEmLabel=(type)=>{ 
  let index=emType.value.findIndex(i=>i.dictValue==type)
  return index>-1?emType.value[index].dictLabel:''
}
const getVipLabel=(type)=>{ 
  let index=vipType.value.findIndex(i=>i.dictValue==type)
  return index>-1?vipType.value[index].dictLabel:''
}
const toEdit=()=>{
  uni.navigateTo({url:'/pages/mine/editProfile'})
}
const toFeedback = () => {
  uni.navigateTo({ url: '/pages/blacklist/feedback' })
}
const logout=()=>{
  uni.removeStorageSync('token')
  uni.removeStorageSync('userInfo')
  uni.reLaunch({url:'/pages/mine/login'})
}
// 协会服务
const services = ref([
  // { icon: 'order', text: '企业详情', color: '#409eff', bg: 'rgba(64,158,255,0.08)',path: '/pages/mine/enterprise_detail' },
  { icon: 'file-text-fill', text: '企业简介', color: '#409eff', bg: 'rgba(64,158,255,0.08)',path: '/pages/mine/enterprise_introduction' },
  { icon: 'coupon-fill', text: '企业风采', color: '#8e60f8', bg: 'rgba(142,96,248,0.08)',path: '/pages/mine/showcase_upload' },
  { icon: 'account-fill', text: '入会员工', color: '#5a98f7', bg: 'rgba(90,152,247,0.08)',path: '/pages/mine/member_upload' },
  // { icon: 'file-text-fill', text: '反馈记录', color: '#5a98f7', bg: 'rgba(90,152,247,0.08)',path: '/pages/mine/feedback_record' },
  // { icon: 'server-man', text: '协会客服', color: '#2ecc71', bg: 'rgba(46,204,113,0.08)' }
])
const getNotice=() => { 
  getNoticeList({status:1}).then(res => {
    console.log(res);
    
    notices.value = res.rows
  })
}
// 通知
const notices = ref([])
const To=(path)=>{
  uni.navigateTo({
    url: path
  })
}

const toNotice=(item)=>{
  uni.navigateTo({
    url: '/pages/mine/noticeDetail?id='+item.id
  })
}
</script>

<style scoped>
.mine-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}
.member-card {
  background: #fff;
  border-radius: 18px;
  margin: 18px 12px 0 12px;
  box-shadow: 0 2px 12px 0 rgba(64,158,255,0.06);
  overflow: hidden;
  padding-bottom: 18px;
}
.member-card-header {
  background: linear-gradient(90deg,#2196f3 0%,#20d3c2 100%);
  padding: 22px 0 38px 0;
  text-align: center;
}
.member-card-title {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
}
.member-card-sub {
  color: #e0f7fa;
  font-size: 14px;
  margin-top: 4px;
}
.member-info {
  display: flex;
  align-items: center;
  margin-top: -38px;
  padding: 0 18px;
}
.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #f5f5f5;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
}
.member-detail {
  margin-left: 18px;
  flex: 1;
}
.member-name {
  font-size: 20px;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
  gap: 8px;
}
.member-tag {
  background: #ffb84d;
  color: #fff;
  font-size: 13px;
  border-radius: 12px;
  padding: 2px 10px;
  margin-left: 8px;
}
.member-id {
  font-size: 14px;
  color: #888;
  margin-top: 4px;
}
.member-meta {
  margin: 18px 18px 0 18px;
  font-size: 14px;
}
.meta-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
  color: #888;
}
.meta-bold {
  color: #222;
  font-weight: 500;
}
.vip {
  color: #ff9900;
}
.job {
  color: #19be6b;
  display: flex;
  align-items: center;
  gap: 2px;
}
.expire {
  color: #19be6b;
  background: #e6f9ea;
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 13px;
  margin-left: 8px;
}
.edit-btn {
  width: 90%;
  margin: 18px 5% 0 5%;
  background: linear-gradient(90deg,#2196f3 0%,#2979ff 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  /* padding: 12px 0; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.logout-btn {
  width: 90%;
  margin: 18px 5% 0 5%;
  background: linear-gradient(90deg,#dd6161 0%,#fa3534 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  /* padding: 12px 0; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.section {
  background: #fff;
  border-radius: 14px;
  margin: 18px 12px 0 12px;
  padding: 16px 16px 10px 16px;
  box-shadow: 0 2px 12px 0 rgba(64,158,255,0.04);
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.section-more {
  color: #409eff;
  font-size: 14px;
  float: right;
  margin-left: auto;
}
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30rpx 0;
}
.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
.service-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.service-text {
  font-size: 14px;
  color: #444;
  margin-top: 2px;
}
.notice-list {
  margin-top: 2px;
}
.notice-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
}
.notice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bbb;
  margin-top: 7px;
  margin-right: 10px;
  flex-shrink: 0;
}
.dot-red {
  background: #fa5151;
}
.notice-content {
  flex: 1;
}
.notice-title {
  font-size: 15px;
  color: #222;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 600rpx;
}
.notice-meta {
  font-size: 13px;
  color: #888;
}
.footer {
  text-align: center;
  color: #aaa;
  font-size: 13px;
  margin: 28px 0 0 0;
  line-height: 1.7;
}
.footer-info {
  margin-top: 2px;
}
</style>